<template>
    <el-container>
        <el-header>
            <el-form :inline="true" :model="formInline" class="demo-form-inline search-form">
                <el-form-item label="型号">
                    <el-input v-model="formInline.model" placeholder="型号"></el-input>
                </el-form-item>
                <el-form-item label="车牌号">
                    <el-input v-model="formInline.num" placeholder="车牌号"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="formInline.status" placeholder="状态">
                        <el-option label="维修中" value="fix"></el-option>
                        <el-option label="空闲" value="free"></el-option>
                        <el-option label="外借中" value="out"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-table
                    class="user-list"
                    :cell-style="cellStyle"
                    ref="multipleTable"
                    :data="cartsData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    :header-cell-style="rowClass"
                    border
                    style="width: 80%;margin:auto">
                <el-table-column
                        fixed
                        prop="Id"
                        label="编号"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="model"
                        label="型号"
                        width="280">
                </el-table-column>
                <el-table-column
                        prop="carsNum"
                        label="车牌号"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="person"
                        label="申请人"
                        width="150">
                </el-table-column>
            </el-table>
            <!--分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="50"
                    layout="total, sizes, prev, pager, next, jumper"
                    class="user-list-page"
                    :total="total">
            </el-pagination>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "vehicleManagement",
        data(){
            return{
                id:0,
                formInline: {
                    model:'',
                    num:'',
                    status:''
                },
                cartsData:[
                    {
                        Id:'1',
                        model:'大众',
                        carsNum:'川A0000',
                        status:'空闲',
                        person:'-'
                    },
                    {
                        Id:'2',
                        model:'大众',
                        carsNum:'川A0023',
                        status:'空闲',
                        person:'-'
                    },
                    {
                        Id:'3',
                        model:'大众',
                        carsNum:'川A0450',
                        status:'维修中',
                        person:'张xx'
                    },
                    {
                        Id:'4',
                        model:'大众',
                        carsNum:'川A4400',
                        status:'外借中',
                        person:'张xx'
                    }
                ],
                // 分页
                currentPage: 1, //当前页
                pageSize:5, //每页显示
                total:''
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            apply(){
                console.log('createNew');
            },
            //分页功能
            handleSizeChange(val) {
                this.pageSize = val
            },
            handleCurrentChange(val) {
                this.currentPage = val
            },
            //表格数据居中显示
            cellStyle({row,column,rowIndex,columnIndex}){
                return "text-align:center"
            },
            rowClass({row,rowIndex}){
                return "text-align:center"
            },
        },
        created() {
            this.total = this.cartsData.length
        }
    }
</script>

<style scoped>
    .search-form {
        border: 1px solid #e4e4e4;
        padding: 20px 20px 0;
        box-shadow: 0 0 3px 1px #e4e4e4;
        border-radius: 3px;
    }
    .user-list {
        margin-top: 20px;
        padding: 20px;
        border: 1px solid #e4e4e4;
        box-shadow: 0 0 3px 1px #e4e4e4;
        border-radius: 3px;
    }
    .user-list-page{
        margin-top: 20px;
        padding: 20px;
        border: 1px solid #e4e4e4;
        box-shadow: 0 0 3px 1px #e4e4e4;
        border-radius: 3px;
        text-align: center;
    }
</style>